<template>
  <div class="foot" >
    <div v-for="(item,index) in list" :key="index" @click="gaoliang(index)" :class="(coust==index?'liang':'')">{{item}}</div>
  </div>
</template>

<script>
export default {
    data() {
        return {
          
            
            coust:0,
            list:["首页","订单","我的"]
        }
    },
    methods:{
        gaoliang(index){
            this.coust = index;
        }
    }
}
</script>

<style>
    .foot{
        background-color: #f5f5f5;
        width: 100%;
        display: flex;
        position: fixed;
        bottom: 0;
        justify-content: space-around;

    }
    .foot>div{
        font-size: 20px;
        padding: 10px;
        
    }
    .liang{
        color: lightskyblue;
    }
</style>